<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.el-card__body {
  padding: 10px;
}

.clearfix {

}


.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.balance-card {
  margin-top: 3%;
}


.balance {
  margin: 10px 0;
  font-size: 24px;
  font-weight: bold;
  padding-left: 10px;
}

.bigcontainer {
  display: grid;
}

.a {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  display: flex;
  flex-wrap: wrap;
  width: 70%;
  margin: 10px auto;
}

.container > div {
  width: 40%;
  flex: 1;
  padding: 0 20px;
  margin: 0 auto;
  box-sizing: border-box; /* 确保 padding 不会使元素的实际宽度发生变化 */
}

</style>

<template>
  <div class="bigcontainer">
    <div class="a">
      <div style="width: 60%">
        <el-card class="balance-card" id="b1">
          <div slot="header" class="clearfix">
            <h2 style="float: left;font-weight: bold;font-size: larger; margin-right: 10px">余额(元)</h2>
            <svg t="1687829829863" class="icon" style="cursor: pointer" viewBox="0 0 1024 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg" p-id="2621" width="25" height="25" v-if="showFirstIcon"
                 @click="changeState">
              <path d="M64.44 64.44h895.12v895.12H64.44z" fill-opacity="0" p-id="2622" fill="#2c2c2c"></path>
              <path
                  d="M888.14 489.62l-0.08-0.09-0.09-0.08q-47.73-100.57-114.25-162.59l-44.32 44.4c38.2 35.14 71.24 81.91 99.74 140.65C756.32 662.53 653.09 734 512 734q-67.26 0-123.43-21.94l-47.81 47.82Q417.46 796.89 512 797q252 0 376.06-262.5a52.62 52.62 0 0 0 0.08-44.85zM832.2 199.23l-37.07-37.06a7 7 0 0 0-9.87 0l-102.1 102Q606.59 227.07 512 227q-252 0-376.06 262.5v0.09a52.72 52.72 0 0 0 0 45q47.73 100.58 114.25 162.68l-88 87.85a7 7 0 0 0 0 9.88l37.06 37.06a7 7 0 0 0 9.88 0L832.2 209a6.91 6.91 0 0 0 0-9.77z m-419.07 335a98 98 0 0 1 117.58-117.6z m161.28-161.31a153.95 153.95 0 0 0-205 205l-74.81 74.82c-38.2-35.14-71.24-81.91-99.74-140.65C267.76 361.47 371 290 512 290q67.26 0 123.43 21.94l-61 61z m-65.91 237a92.79 92.79 0 0 1-16.43-1.39l-44.67 44.64a154 154 0 0 0 202.36-202.36l-44.66 44.67a102.12 102.12 0 0 1 1.39 16.43 98 98 0 0 1-97.99 97.99z"
                  fill-opacity=".45" p-id="2623" fill="#2c2c2c"></path>
            </svg>
            <svg t="1687829913387" class="icon" style="cursor: pointer" viewBox="0 0 1024 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg" p-id="3039" width="20" height="25" v-if="!showFirstIcon"
                 @click="changeState">
              <path
                  d="M642.7 532.3c0 41.2-33.4 74.6-74.6 74.6s-74.6-33.4-74.6-74.6c0-41.2 33.4-74.6 74.6-74.6h0.6c-17.3-6.6-36.4-10.1-56.1-10.1-88.9 0-161.2 71.6-161.2 160.6 0 88.3 72.2 160 161.2 160s161.2-71.6 161.2-160.6c0-37.6-13.1-71.6-34.6-99.1 2.3 7.6 3.5 15.4 3.5 23.8z"
                  fill="#3C4858" p-id="3040"></path>
              <path
                  d="M512.1 290.3C309.8 290.3 136.7 421 64.4 606 136 792.2 309.1 924.1 512 924.1c202.3 0 375.4-131.3 447.6-318.1-71.5-185-245.2-315.7-447.5-315.7z m0 570c-168.3 0-313.4-104.5-381.4-254.3 68-149.2 213.1-252.5 381.4-252.5S825.5 456.8 893.5 606c-68 150.4-213.1 254.3-381.4 254.3z"
                  fill="#3C4858" p-id="3041"></path>
              <path
                  d="M112.9 361.9c10.3 0 19.5-5.1 25-13C221.5 239.6 360.1 173 508.3 173c148 0 286.5 66.4 370.1 175.5 5.6 7.7 14.6 12.7 24.8 12.7 16.9 0 30.6-13.7 30.6-30.6 0-6.5-2-12.5-5.4-17.4v-0.1c-0.2-0.3-0.4-0.5-0.6-0.8v-0.1l-3.3-4.2c-95.3-122-250.7-196.1-416.1-196.1-167.9 0-325.4 76.4-420.3 201.6v0.1c-3.6 5-5.7 11.1-5.7 17.8-0.1 16.8 13.6 30.5 30.5 30.5z"
                  fill="#3C4858" p-id="3042"></path>
            </svg>

          </div>
          <div>
            <div class="balance">{{ maskedBalance }}</div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="container">
      <div>
        <el-card class="balance-card" id="b2">
          <div slot="header" class="clearfix">
            <h2 style="float: left;font-weight: bold;font-size: larger; margin-right: 10px">总支出(元)</h2>

          </div>
          <div>
            <div class="balance">{{ TotalExpenditure }}</div>
          </div>
        </el-card>
      </div>

      <div>
        <el-card class="balance-card" id="b3">
          <div slot="header" class="clearfix">
            <h2 style="float: left;font-weight: bold;font-size: larger; margin-right: 10px">总收入(元)</h2>

          </div>
          <div>
            <div class="balance">{{ TotalIncome }}</div>
          </div>
        </el-card>
      </div>
    </div>

    <div class="container">
      <div>
        <el-card class="balance-card" id="b2">
          <div slot="header" class="clearfix">
            <h2 style="float: left;font-weight: bold;font-size: larger; margin-right: 10px">月支出(元)</h2>


          </div>
          <div>
            <div class="balance">{{ MonthExpenditure }}</div>
          </div>
        </el-card>
      </div>

      <div>
        <el-card class="balance-card" id="b3">
          <div slot="header" class="clearfix">
            <h2 style="float: left;font-weight: bold;font-size: larger; margin-right: 10px">月收入(元)</h2>
          </div>
          <div>
            <div class="balance">{{ MonthIncome }}</div>
          </div>
        </el-card>
      </div>
    </div>

    <div>

    </div>


  </div>


</template>

<script>
import Api from '@/api/wallet'

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "balance",
  data() {
    return {
      showFirstIcon: true,
      wallet: {
        balance: 0.00,
        totalIncome: 0.00,
        totalExpenditure: 0.00,
        monthIncome: 0.00,
        monthExpenditure: 0.00
      },
      masking: false
    }
  },
  computed: {
    maskedBalance() {
      return this.masking ? '***.**' : this.balance
    },
    TotalIncome() {
      return this.masking ? '***.**' : this.totalIncome
    },
    TotalExpenditure() {
      return this.masking ? '***.**' : this.totalExpenditure
    },
    MonthIncome() {
      return this.masking ? '***.**' : this.monthIncome
    },
    MonthExpenditure() {
      return this.masking ? '***.**' : this.monthExpenditure
    }
  },
  methods: {
    toggleMasking() {
      this.masking = !this.masking
      this.getWallet()
    },
    getWallet() {
      Api.getWallet().then(res => {
        this.balance = res.balance
        this.totalIncome = res.totalIncome
        this.totalExpenditure = res.totalExpenditure
      })
      Api.getMonthIncome().then(res => {
        this.monthIncome = res
      })
      Api.getMonthExpenditure().then(res => {
        this.monthExpenditure = res
      })
    },
    toggleIcon() {
      this.showFirstIcon = !this.showFirstIcon;
    },
    changeState() {
      this.toggleIcon();
      this.toggleMasking();

    }
  },
  created() {
    this.toggleMasking();
  }
}
</script>


